<template>
    <div class="category">
        <nav-bar class="bar">
            <div slot="center">商品分类</div>
        </nav-bar>
        <div class="tabMenu">
            <tab-menu :getCartdata="getCartgorydata" @selectItem="selectMenu"></tab-menu>
        </div>
        <scroll class="content" ref="scroll">
       <content-cartgory :subcategories="getCartsubData"></content-cartgory>
            <tab-control :titles="['综合', '新品', '销量']" @tabclick="tabClick"></tab-control>
             <cartgory-detail :category-detail="getCartgoryDetail"></cartgory-detail>
        </scroll>
    </div>
</template>

<script>
    import NavBar from '../../components/common/navbar/NavBar'
    import TabMenu from  './childrenCartgory/tab-menu'
    import ContentCartgory from  './childrenCartgory/contentCartgory'
    import TabControl from '../../components/content/tabcontrol/TabControl'
    import CartgoryDetail from  './childrenCartgory/CartgoryDetail'
    import  Scroll from  '../../components/common/scroll/Scroll'
    import {getCartgory,getSubCartgory,getCartgoryDetail} from '../../network/cartgory'

    export default {
        name: 'Category',
        components: {
            NavBar,
            TabMenu,
            ContentCartgory,
            Scroll,
            TabControl,
            CartgoryDetail
        },
        data() {
            return {
                getCartgorydata:[],//主数据
                getCartsubData:{},//子分页数据
                getCartgoryDetail:[],
                currentIndex: -1,
                currenttype: 'pop',


            }
        },
        methods: {
            //请求分类数据
            getCartgoryData(){
                getCartgory().then(res =>{
                    this.getCartgorydata = res.data.data.category.list
                    // console.log(this.getCartgorydata)
                    // 当用户刚点进来或者刷新的时候 映射正在流行的数据
                    this.getSubCartgories(0)


                })
            },
            //请求第一页分类的数据  点击菜单时请求分类页数据
            getSubCartgories(index) {
                this.currentIndex = index;
                const mailKey = this.getCartgorydata[index].maitKey;
                getSubCartgory(mailKey).then(res => {
                    this.getCartsubData = res.data.data
                    // console.log(this.getCartsubData)
                })
                //获取所有tabcontrol类型的数据
               this.getCartgoryDetailList(this.currenttype)

            },

            //请求分页详情页数据
            getCartgoryDetailList(type){
                 //获取请求的miniWallkey
                const miniWallkey = this.getCartgorydata[this.currentIndex].miniWallkey
                getCartgoryDetail(miniWallkey ,type).then(res =>{
                    //保存类型数据
                    this.getCartgoryDetail = res.data
                    console.log(this.getCartgoryDetail);
                })
            },


            selectMenu(index){
                this.getSubCartgories(index)
                //点击其他类型时滚动到最上方
                this.$refs.scroll.scroll.scrollTo(0 ,0 ,0)
            },
            //tabcontrol 的点击
            tabClick(index){
                if (index == 0){
                    this.currentIndex =0
                    this.currenttype = 'pop'
                    // this.getCartgoryDetailList(this.currenttype)
                }else  if(index == 1){
                    this.currentIndex =1
                    this.currenttype = 'sell'
                    this.getCartgoryDetailList(this.currenttype)
                }else {
                    this.currentIndex =2
                    this.currenttype = 'new'
                    this.getCartgoryDetailList(this.currenttype)
                }
            }
        },
        created() {
            this.getCartgoryData()

        },
        mounted(){

        },
        activated() {

        }

    }
</script>

<style scoped>
    .bar {
        background-color: var(--color-high-text);
        color: #ffffff;
        position: relative;

    }
    .tabMenu{
        height: calc(100% - 44px - 49px);
        width: 100px;

    }
    .content{
        height: calc(100% - 44px - 49px);
        position: absolute;
        left: 100px;
        overflow: hidden;
    }

</style>